/*
* @Author: lenovo
* @Date:   2017-11-16 18:40:39
* @Last Modified by:   lenovo
* @Last Modified time: 2017-11-30 17:51:34
*/
require('./index.css');
var page = {
			// 获取祖先容器
	getAncestorWrap : document.getElementsByClassName("music-wrap")[0],
			// 获取播放器的容器
	getMusicDiv : document.getElementsByClassName("music-left")[0], 
			// 获取audio 
	getAudioTag : document.getElementsByTagName('audio')[0],
			// 获取添加自己歌曲的按钮 
	getBtnAdd : document.querySelector('#addMy'),
			// 获取删除的按钮
	getDelMusicBtn:null,
			// 返回首页按钮
	toIndex:document.querySelector('#toIndex'),
	toIndexHide:document.querySelector('#toIndexHide'),
			// 获得歌单的每个li
	musicListItem:document.getElementsByClassName('music-list-item'),
			// 获得显示歌词的div
	getLrcAreaDiv:document.querySelectorAll('.lrc-area')[0],
	getMusicRight:document.getElementsByClassName('music-right')[0],
			// 存储时间和歌词对应的对象
	lrcObj:null,
			// 获取歌单容器ul标签
	ulTag:document.getElementsByClassName('music-list')[0],
	basicWidth:document.getElementsByClassName('row')[0].offsetWidth,
	hideMusicList:document.getElementsByClassName("hide-music-list")[0],
	cwidth:document.body.clientWidth,
			//存储当前播放的第几首歌，和前一次比较，如果不一样，则重绘歌词并重新播放
	flag:0,
			//存储前一次播放的第几首歌，
	oldflag:0,
			// 存储点击了歌单几次
	num:0,
			//将现有的歌曲信息存放在JSON对象里
	music:{
		'longJuanFeng':{
			musicName:'龙卷风',
			musicAuthor:'邓紫棋',
			musicURL:'http://localhost:8088/src/image/testmusic.mp3',
			musicLrcURL:'http://localhost:8088/src/image/testmusic.lrc',
		},
		'fenShou':{
			musicName:'分手快乐',
			musicAuthor:'冰淇',
			musicURL:'http://localhost:8088/src/image/fen-shou.mp3',
			musicLrcURL:'http://localhost:8088/src/image/fen-shou.lrc'
		}
	},	
	init: function (){
		HTMLCollection.prototype.toArray=function(){
                return [].slice.call(this);
        };
        this.getAncestorWrap.style.width = this.basicWidth+'px';
		//歌词容器占3/4，歌单1/4
		this.getMusicDiv.style.width = this.basicWidth*3/4 + 'px';
		this.getMusicRight.style.width = this.basicWidth*1/4 + 'px';
		// alert(this.getAncestorWrap.offsetWidth);
		// 用歌词信息渲染歌单
		for(var key in this.music){
			for(var i in this.music[key]){
				if(i=='musicName'){
					this.createLi(this.music[key][i]);
				}
			}
		}
		if(this.cwidth<=414){
			this.getMusicDiv.style.width="100%";
		}
		this.bindEvent();
	},
	createLi:function (text) {
		// alert(text);
		var liTag = document.createElement('li');
		var spanTagMusicName = document.createElement('span');
		var spanTagDel = document.createElement('span');
		spanTagMusicName.innerHTML = text;
		spanTagDel.innerHTML = 'del';
		liTag.className = 'music-list-item';
		spanTagDel.className = 'del';
		spanTagMusicName.className = 'music-name';
		// spanTag.style = 'del';
		this.getDelMusicBtn = document.getElementsByClassName('del');
		this.getspanTagMusicName = document.getElementsByClassName('music-name');
		
		liTag.appendChild(spanTagMusicName);
		liTag.appendChild(spanTagDel);
		if(this.cwidth>414){
			this.ulTag.appendChild(liTag);
			console.log(this.ulTag.childNodes);
		}else{
			this.hideMusicList.appendChild(liTag);
		}
	},
	bindEvent: function (){
		var _this = this;
		// 返回首页事件
		this.toIndex.addEventListener('click',this.returnIndex);
		this.toIndexHide.addEventListener("click",this.returnIndex);
		// 上传音乐事件
		this.getBtnAdd.addEventListener('click',this.addMy.bind(this));
		// 删除音乐事件
		this.getDelMusicBtn.toArray().forEach(function(curr,index){
			curr.addEventListener('click',function(){
				_this.delMusic(curr,index)
			});
		});
		// 给歌单的每个item添加点击事件，点击哪个播放哪个
		this.getspanTagMusicName.toArray().forEach(function(curr,index){
			curr.addEventListener('click',function(){
				if(_this.getLrcAreaDiv.getElementsByTagName('p')){
					_this.getLrcAreaDiv.getElementsByTagName('p').toArray().forEach(function(curr,index){
							// console.log(index);
							curr.style.backgroundColor='';
							curr.style.color='white';
					});
				}
				_this.num+=1;
				_this.getLrcAreaDiv.innerHTML='';
				//每一次播放前都要将播放时间、进度归零，不然p的背景色会混乱
				_this.getAudioTag.duration=0;
				_this.getAudioTag.currentTime=0;

				// console.log(_this.getLrcAreaDiv.getElementsByTagName('p')[0].style.backgroundColor);
				// alert(_this.getLrcAreaDiv.getElementsByTagName('p'));
				if(_this.num==1){
					// alert("当前播放第"+index+"首歌")
					// 将选中的video-item传给播放函数，
					_this.runMusic(curr,index);
					_this.flag=index;
				}
				else{
						if(index!=_this.flag){
							_this.flag = index;
								// _this.flag = index;
								// alert("当前播放第"+index+"首歌")
								// 将选中的video-item传给播放函数，
								_this.runMusic(curr,index);
					}
				}
			});
		});
	},
	runMusic:function(obj,para){
		// 把选中的歌曲的src赋值给audio的src属性
		switch(para){
			case 0: {
				this.getAudioTag.src=this.music.longJuanFeng.musicURL;
				// ajax请求歌词，渲染到页面
				this.requestLrc(this.music.longJuanFeng.musicLrcURL);
				this.getAudioTag.play();  //播放选中的歌曲。
				// 同时开始滚动歌词，高亮当前歌词
				this.showNowLrc();
				break;
			}
			case 1: {
				this.getAudioTag.src=this.music.fenShou.musicURL;
				this.requestLrc(this.music.fenShou.musicLrcURL);
				this.getAudioTag.play();  //播放选中的歌曲。
				// 同时开始滚动歌词，高亮当前歌词
				this.showNowLrc();
				break;
			} 
		}
	},
	showNowLrc:function(){

		// 快进还没有考虑
		var lrcPTag = document.getElementsByTagName('p');
		var _this = this;
		var colNum = 0;
		var key, counter = 0;
		for(key in _this.lrcObj) counter++;
			// alert(counter);
		setInterval(function(){
			// 获取当前播放到哪一秒
			var nowLrc = Math.floor(_this.getAudioTag.currentTime);
			// 需要存储哪一秒是哪句歌词的对象 _this.lrcObj;
			for(var i in _this.lrcObj){  //得到秒数
				if(nowLrc == i){
					colNum += 1;
					// 先清除之前的样式，意在突出显示当前播放句
					if(lrcPTag[colNum-2]){
						// alert(colNum-2);
						lrcPTag[colNum-2].style.color = "yellow";
						lrcPTag[colNum-2].style.backgroundColor = '';
					}
					// 如果播放到这一句，则p的字体颜色改变，
					// 并且检测当前p标签的margin-top，如果超出区域，则滚动滚轮，
					if(colNum%14==0){
						window.scroll.value+=6;
						alert("滚动滚轮");
					}
					// alert("colnum: " + colNum);
					lrcPTag[colNum-1].style.color = "seagreen";
					lrcPTag[colNum-1].style.backgroundColor = "rgba(0,0,0,0)";
					// console.log('colNum:'+colNum);
				}
			}
				if(colNum === counter){
					alert("播放完毕");
				}
		},1000);
	},
	requestLrc:function(para){  
		//para是传进来的歌词的绝对路径;
		var xhr = this.createXHR();
		xhr.open("get",para,false);
		xhr.send(null);
		if((xhr.status >= 200 && xhr.status<300) || xhr.status == 304){
	        // alert(xhr.statusText);
	    }
	    else {
	        // alert("fail" + xhr.status);
	    }
	    this.decodeLrc(xhr.responseText);
	},
	decodeLrc:function(lrc){
		//不匹配没有时间的一行歌词
		// 就有多少秒就有多少对象的键值对，但并不是每一个元素都是歌词
				var lyrics = lrc.split("\n");  // 将歌词按行存在数组中，每个元素都是歌词的一行
				// console.log(lyrics);  
			    this.lrcObj = {};
			    for(var i=0;i<lyrics.length;i++){
			        var lyric = decodeURIComponent(lyrics[i]);
			        var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;  // 匹配时间
			        var timeRegExpArr = lyric.match(timeReg);  //保存所有时间
			        if(!timeRegExpArr)continue;   //如果没有匹配到则继续向下匹配
			        var clause = lyric.replace(timeReg,'');  //用''替换这一行的时间并返回替换后的这一行歌词
			        for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
			            var t = timeRegExpArr[k];
			            var min = Number(String(t.match(/\[\d*/i)).slice(1)),  //分钟
			                sec = Number(String(t.match(/\:\d*/i)).slice(1));	//秒
			            var time = min * 60 + sec;// 时间转换成秒
			            // console.log(time);
			            this.lrcObj[time] = clause;
			        }
			    }
			    // console.log(lrcObj[1]); //第1秒的歌词
			    // return lrcObj;
		// 调用渲染页面的方法
		this.drawLrc(this.lrcObj);
	},
	drawLrc:function(obj){
		// console.log(obj);  
		// 拿到每一行歌词组成的对象，li标签渲染页面
		// 开始添加li
		for(var i in obj){
			//调用渲染一个li标签的函数,将这行歌词传进去
			this.drawMusicLi(obj[i]);  
		}
	},
	drawMusicLi:function(str){
		// console.log('str:  '+str);
		var musicLi = document.createElement('p');
		musicLi.innerHTML = str;
		this.getLrcAreaDiv.appendChild(musicLi);
	},
	returnIndex:function(){
		window.location.href='./index.html';
	},
	delMusic:function(obj,index){
		alert("a");
		if(confirm("确定要删除第"+(index+1)+"首音乐?")){
			alert(index);
		};
		// obj
	},
	addMy: function(){
		alert("我要添加音乐");
	},
	createXHR:function(){
		return new XMLHttpRequest();
	}
};
(function(){
	page.init();
})();
